<template>
	<view v-if='this.cart.length !== 0 '>
		<u-swipe-action :show="item.goods_show" :index="index" :options="options" v-for="(item,index) in cart"
			:key="item.goods_id" @click="click" @open="open">
			<view class="item u-border-bottom">
				<view class="item-left">
					<label class="radio">
						<radio @click="radio(item.goods_state,item.goods_id)" :checked="item.goods_state" value="" />
						<text></text>
					</label>
					<!-- <image mode="aspectFill" :src="item.goods_small_logo" /> -->
					<u-image border-radius="10px" fade :lazy-load="true" width="60px" height="60px"
						:src="item.goods_small_logo">
						<u-loading slot="loading"></u-loading>
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
				</view>
				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="title-wrap">
					<text class="title u-line-2" @tap="send(item.goods_id )">{{ item.goods_name }}</text>
					<view class="goods_price">
						<text style="color: red;">￥{{item.goods_price}}</text>
						<u-number-box @minus="minus(index,item,item.goods_id)" @plus="plus(index,item,item.goods_id)"
							v-model="item.goods_count">
						</u-number-box>
					</view>
				</view>
			</view>
		</u-swipe-action>
		<!-- 全选框 -->
		<view class="allradio" :style="{bottom}">
			<view class="allradio-left">
				<label class="radio">
					<radio @click="allradio" :checked="checked" value="" />
				</label>
				<text>全选</text>
			</view>
			<view class="allradio-right">
				<view class="text">
					<text>合计</text>
					<text>￥{{price}}</text>
				</view>
				<view @tap="allprice">
					<!-- 结算按钮 -->
					<button :disabled="disabled">结算</button>
				</view>
			</view>
		</view>
	</view>

	<!-- 购物车如果为空 -->
	<view class="none" v-else :style="{height}">
		<view class="img">
			<view class="img-text">
				<u-image width="90px" height="90px" src="../../static/images/cart.png"></u-image>
				<br>
				<text>购物车空空如也</text>
			</view>
		</view>
	</view>


</template>
<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				value: 2,
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
						text: '收藏',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				height: "",
				disabled: true,
				checked: null,
				bottom:0
			};
		},
		computed: {
			// 将 m_cart 模块中的 total 映射为当前页面的计算属性
			...mapGetters('cart', ['total']),
			...mapState('cart', ['cart']),
			price() {
				let sum = 0
				this.cart.map(item => {
					sum += item.goods_price * item.goods_count
				})
				return sum
			},
		},
		methods: {
			...mapMutations('cart', ['updategoods', 'addCart', 'removegoods', 'saveToStorage']),
			setBadge() {
				// 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
				uni.setTabBarBadge({
					index: 2, // 索引
					text: this.total + '' // 注意：text 的值必须是字符串，不能是数字
				})
			},
			click(index, index1) {
				// 删除
				if (index1 == 1) {
					this.removegoods(this.cart[index].goods_id)
				} else {
					//收藏 
					// console.log('收藏')
				}
			},
			open(index) {
				this.cart[index].goods_show = true;
				this.cart.map((val, idx) => {
					if (index != idx) this.cart[idx].goods_show = false;
				})
			},
			//切换单选框
			radio(status, id) {
				const goods = {
					goods_state: !status,
					goods_id: id
				}
				this.updategoods(goods)
			},



			// 减少
			minus(index, items, id) {
				this.cart.map(item => {
					if (item.goods_id === id) {
						item.goods_count = items.goods_count
					}
				})
				if (items.goods_count === 0) {
					this.removegoods(this.cart[index].goods_id)
				}
				this.saveToStorage(this.cart)
			},

			// 增加
			plus(index, items, id) {
				this.cart.map(item => {
					if (item.goods_id === id) {
						item.goods_count = items.goods_count
					}
				})
				this.saveToStorage(this.cart)
			},
			// 结算按钮
			allprice() {
				uni.showToast({
					title: '余额不足',
					icon: "none"
				})
			},



			// 跳到商品详情页面
			send(id) {
				uni.navigateTo({
					url: '/subpag/goods_msg/goods_msg?id=' + id
				})
			},

			// 全选按钮
			allradio() {
				this.checked = !this.checked
				const state = this.cart.filter(item => {
					item.goods_state === true
				})
				if (this.checked) {
					this.cart.map(item => item.goods_state = true)
				} else {
					this.cart.map(item => item.goods_state = false)
				}
				this.saveToStorage(this.cart)
			}

		},
		onShow() {
			// 在页面刚展示的时候，设置数字徽标
			this.setBadge()
		},
		onReady() {
			uni.getSystemInfo({
				success: res => {
					this.height = res.windowHeight + 'px'
				}
			})

			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('运行Android上')
					this.bottom = 0 + 'px'
					break;
				case 'ios':
					console.log('运行iOS上')
					this.bottom = 50 + 'px'
					console.log(this.bottom)
					break;
				default:
					console.log('运行在开发者工具上')
					break;
			}
		},
		mounted() {
			// 初始化 单选框的状态
			this.cart.map(item => {
				if (item.goods_state === true) {
					this.checked = true
				} else {
					this.checked = false
				}
			})

		},

	}
</script>
<style lang="scss" scoped>
	// 全选那妞
	.allradio {
		width: 100%;
		height: 100upx;
		position: fixed;
		align-items: center;
		bottom: 0;
		display: flex;
		left: 0;
		justify-content: space-between;
		background-color: #F3F3F3;
		padding: 0 10upx;

		.allradio-right {
			display: flex;
			align-items: center;

			button {
				background-color: #FF6804;
				width: 200upx;
				border-radius: 20px;
				color: white;
				height: 80upx;
			}
		}

		.text text:nth-child(1) {
			font-size: 30upx;
			color: red;
		}

		.text text:nth-child(2) {
			font-size: 12px;
			padding-right: 10px;
			color: #FD6B04;
		}

	}

	.img-text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.node {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item {
		display: flex;
		padding: 20rpx;
		width: 98% !important;
		margin: 0 auto;
		border-radius: 10upx;
		margin-top: 10upx;
	}

	.goods_price {
		display: flex;
		justify-content: space-between;
		padding: 10upx 0;
		width: 100%;
	}

	.item-left {
		display: flex;
		align-items: center;
	}

	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}

	.title-wrap {
		flex-direction: column;
		padding-left: 10px;
	}
</style>
